<template>
  <FrontSideTreeTable
    treeDataUrl="/param/positionType/getList"
    tableDataUrl="/param/evaluationIndex/getList"
    addUrl="/param/evaluationIndex/add"
    editUrl="/param/evaluationIndex/edit"
    deleteUrl="/param/evaluationIndex/delete"
    treeTitle="部位"
    :tableTitle="selectedNode.name+'评定指标列表'"
    :tableProps="tableProps"
    :columns="columns"
    searchHint="根据指标名称搜索"
    :searchProps="searchProps"
    :form="form"
    :rules="rules"
    @onNodeClick="handleNodeClick"
    @beforeAdd="handleAdd"
    @beforeEdit="handleEdit"
    @onTableCreated="handleTableCreated"
    @onTreeCreated="handleTreeCreated">

    <!--表单-->
    <template slot="form">
      <el-form-item label="所属部位" prop="positionTypeId">
        <el-select v-model="form.positionTypeId" style="width: 100%;" placeholder="选择所属部位" filterable>
          <el-option v-for="item of treeData" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指标名称" prop="name">
        <el-input v-model="form.name" placeholder="输入指标名称"></el-input>
      </el-form-item>
      <el-form-item label="最高标度" prop="maxScale">
        <el-select v-model.number="form.maxScale" style="width: 100%" placeholder="选择最高标度" filterable>
          <el-option label="标度3" value=3></el-option>
          <el-option label="标度4" value=4></el-option>
          <el-option label="标度5" value=5></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="顺序号" prop="sortNo">
        <el-input type="number" v-model.number="form.sortNo" placeholder="输入顺序号"></el-input>
      </el-form-item>
      <el-form-item label="备注">
        <el-input type="textarea" v-model="form.notes"> </el-input>
      </el-form-item>
    </template>

  </FrontSideTreeTable>
</template>

<script>
  import FrontSideTreeTable from "../../template/FrontSideTreeTable.vue"
  import {clearFields} from "../../../assets/js/utils/ObjectUtils"
  import {intValidator} from "../../../assets/js/utils/ValidateUtils"

  let oldName = "";

  //最高标度的筛选条件
  const filters = [
    {text:"标度3", value:3},
    {text:"标度4", value:4},
    {text:"标度5", value:5}
  ];

  export default {
    name:"EvaluationIndexMaintenance",
    data() {
      let nameValidator = (rule, value, callback)=>{
        if(oldName === value) {
          callback();
        } else if(this.tableData.some(item=>item.name === value)) {
          callback(new Error("指标名重复"));
        } else {
          callback();
        }
      };

      return {
        treeData:[],
        tableData:[],
        selectedNode:{name:""},
        form:{
          name:"",
          positionTypeId:"",
          notes:"",
          maxScale:3,
          sortNo:0
        },
        rules:{
          positionTypeId:[
            {required:true, message:"请选择所属部位", trigger:"blur"}
          ],
          name:[
            {required:true, message:"请输入评定指标名", trigger:"blur"},
            {validator:nameValidator, trigger:"blur"}
          ],
          maxScale:[
            {required:true, type:"number", message:"请选择最高标度", trigger:"blur"},
          ],
          sortNo:[
            {validator:intValidator, trigger:"blur"}
          ]
        },
        tableProps:{parentId:"positionTypeId"},
        searchProps:["name"],
        columns:[
          {prop:"sortNo", label:"顺序号", width:"100", sortable:"custom"},
          {prop:"name", label:"评定指标名"},
          {prop:"maxScale", label:"最高标度", columnKey:"maxScale", filters, filterPlacement:"bottom"}
        ]
      }
    },
    methods:{
      handleTableCreated(data) {
        this.tableData = data;
      },
      handleTreeCreated(data) {
        this.treeData = data;
      },
      handleNodeClick(data) {
        this.selectedNode = data;
      },
      handleAdd() {
        oldName = "";
        clearFields(this.form);
        this.form.positionTypeId = this.selectedNode.id;
        this.form.maxScale = 3;
      },
      handleEdit(data) {
        oldName = data.name;
        this.form = {...data};
      }
    },
    components:{FrontSideTreeTable}
  }
</script>



// WEBPACK FOOTER //
// EvaluationIndexMaintenance.vue?851da94a